<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carousel</title>
  <!-- 引用css样式 -->
  <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
  <!-- 主体 -->
  <div class="main" id="main">

    <!-- 左侧菜单 -->
    <div class="menu-box" id="menu-box">

      <!-- 一级菜单 -->
      <div class="menu-content" id="menu-content">

        <!-- 一级菜单列表 -->
        <div class="menu-item">
          <!-- 一级菜单内容 -->
          <a href="#">
            <!-- 菜单标题 -->
            <span>手机、配件</span>
            <!-- 菜单图标 -->
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <!-- 菜单列表 -->
        <div class="menu-item">
          <!-- 菜单内容 -->
          <a href="#">
            <!-- 菜单标题 -->
            <span>电脑</span>
            <!-- 菜单图标 -->
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <!-- 菜单列表 -->
        <div class="menu-item">
          <!-- 菜单内容 -->
          <a href="#">
            <!-- 菜单标题 -->
            <span>家用电器</span>
            <!-- 菜单图标 -->
            <i class="icon">&#xe665;</i>
          </a>
        </div>
        <!-- 菜单列表 -->
        <div class="menu-item">
          <!-- 菜单内容 -->
          <a href="#">
            <!-- 菜单标题 -->
            <span>家具</span>
            <!-- 菜单图标 -->
            <i class="icon">&#xe665;</i>
          </a>
        </div>
      
      
      </div>

      <!-- 二级菜单 -->
      <div class="sub-menu" id="sub-menu">

        <!-- 二级菜单内容 -->
        <div class="inner-box">
          
          <!-- 标题 -->
          <p class="title">手机、配件</p>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">手机通讯：</span>
            <!-- 商品小类 -->
            <a href="#">手机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">手机维修</a>
            <span class="ml10 mr10">/</span>
            <a href="#">以旧换新</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">手机配件：</span>
            <!-- 商品小类 -->
            <a href="#">手机壳</a>
            <span class="ml10 mr10">/</span>
            <a href="#">手机储存卡</a>
            <span class="ml10 mr10">/</span>
            <a href="#">数据线</a>
            <span class="ml10 mr10">/</span>
            <a href="#">充电器</a>
            <span class="ml10 mr10">/</span>
            <a href="#">电池</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">运营商：</span>
            <!-- 商品小类 -->
            <a href="#">中国联通</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国移动</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国电信</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">智能设备：</span>
            <!-- 商品小类 -->
            <a href="#">智能手环</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能家居</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能手表</a>
            <span class="ml10 mr10">/</span>
            <a href="#">其他配件</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">娱乐：</span>
            <!-- 商品小类 -->
            <a href="#">耳机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">音响</a>
            <span class="ml10 mr10">/</span>
            <a href="#">收音机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">麦克风</a>
          </div>
        </div>

        <!-- 二级菜单内容 -->
        <div class="inner-box">
          
          <!-- 标题 -->
          <p class="title">电脑</p>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">电脑：</span>
            <!-- 商品小类 -->
            <a href="#">笔记本</a>
            <span class="ml10 mr10">/</span>
            <a href="#">平板</a>
            <span class="ml10 mr10">/</span>
            <a href="#">一体机</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">电脑配件：</span>
            <!-- 商品小类 -->
            <a href="#">手机壳</a>
            <span class="ml10 mr10">/</span>
            <a href="#">手机储存卡</a>
            <span class="ml10 mr10">/</span>
            <a href="#">数据线</a>
            <span class="ml10 mr10">/</span>
            <a href="#">充电器</a>
            <span class="ml10 mr10">/</span>
            <a href="#">电池</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">游戏设备：</span>
            <!-- 商品小类 -->
            <a href="#">中国联通</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国移动</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国电信</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">网络产品：</span>
            <!-- 商品小类 -->
            <a href="#">智能手环</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能家居</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能手表</a>
            <span class="ml10 mr10">/</span>
            <a href="#">其他配件</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">外部产品：</span>
            <!-- 商品小类 -->
            <a href="#">耳机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">音响</a>
            <span class="ml10 mr10">/</span>
            <a href="#">收音机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">麦克风</a>
          </div>
        </div>

        <!-- 二级菜单内容 -->
        <div class="inner-box">
          
          <!-- 标题 -->
          <p class="title">家用电器</p>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">电视：</span>
            <!-- 商品小类 -->
            <a href="#">笔记本</a>
            <span class="ml10 mr10">/</span>
            <a href="#">平板</a>
            <span class="ml10 mr10">/</span>
            <a href="#">一体机</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">空调：</span>
            <!-- 商品小类 -->
            <a href="#">手机壳</a>
            <span class="ml10 mr10">/</span>
            <a href="#">手机储存卡</a>
            <span class="ml10 mr10">/</span>
            <a href="#">数据线</a>
            <span class="ml10 mr10">/</span>
            <a href="#">充电器</a>
            <span class="ml10 mr10">/</span>
            <a href="#">电池</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">冰箱：</span>
            <!-- 商品小类 -->
            <a href="#">中国联通</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国移动</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国电信</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">洗衣机：</span>
            <!-- 商品小类 -->
            <a href="#">智能手环</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能家居</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能手表</a>
            <span class="ml10 mr10">/</span>
            <a href="#">其他配件</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">外部产品：</span>
            <!-- 商品小类 -->
            <a href="#">耳机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">音响</a>
            <span class="ml10 mr10">/</span>
            <a href="#">收音机</a>
            <span class="ml10 mr10">/</span>
            <a href="#">麦克风</a>
          </div>
        </div>

        <!-- 二级菜单内容 -->
        <div class="inner-box">
          
          <!-- 标题 -->
          <p class="title">家具</p>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">家纺：</span>
            <!-- 商品小类 -->
            <a href="#">笔记本</a>
            <span class="ml10 mr10">/</span>
            <a href="#">平板</a>
            <span class="ml10 mr10">/</span>
            <a href="#">一体机</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">灯具：</span>
            <!-- 商品小类 -->
            <a href="#">手机壳</a>
            <span class="ml10 mr10">/</span>
            <a href="#">手机储存卡</a>
            <span class="ml10 mr10">/</span>
            <a href="#">数据线</a>
            <span class="ml10 mr10">/</span>
            <a href="#">充电器</a>
            <span class="ml10 mr10">/</span>
            <a href="#">电池</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">厨具：</span>
            <!-- 商品小类 -->
            <a href="#">中国联通</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国移动</a>
            <span class="ml10 mr10">/</span>
            <a href="#">中国电信</a>
          </div>

          <!-- 列表 -->
          <div class="sub-row">
            <!-- 商品大类 -->
            <span class="bold mr10">家装：</span>
            <!-- 商品小类 -->
            <a href="#">智能手环</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能家居</a>
            <span class="ml10 mr10">/</span>
            <a href="#">智能手表</a>
            <span class="ml10 mr10">/</span>
            <a href="#">其他配件</a>
          </div>
        </div>
      </div>

    </div>

    <!-- 轮播图 -->
    <div class="banner" id="banner">

      <!-- 轮播图片1 -->
      <a href="#"><div class="banner-slide slide1 slide-active"></div></a>

      <!-- 轮播图片2 -->
      <a href="#"><div class="banner-slide slide2"></div></a>

      <!-- 轮播图片3 -->
      <a href="#"><div class="banner-slide slide3"></div></a>
    </div>

    <!-- 轮播按钮 - 上一页 -->
    <a href="#" id="prev" class="button prov"></a>

    <!-- 轮播按钮 - 下一页 -->
    <a href="#" id="next" class="button next"></a>

    <!-- 轮播点 -->
    <div class="dots" id="dots">
      <span class="active"></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <!-- 引入JS -->
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>